<template>
  <div>
    <el-row :gutter="20" type="flex" justify="start" class="menu-card">
      <!-- MongoDB会自动创建 _id字段，这个字段是数据的唯一标识 -->
      <el-col v-for="item in info" :key="item._id">
        <el-card :body-style="{ padding: '0px' }">
          <!-- 使用超链接包裹 router-link -->
          <router-link :to="{ name: 'detail', query: { menuId: item._id } }">
            <img :src="item.product_pic_url" class="image" />
            <div style="padding: 14px" class="menu-card-detail">
              <h3>{{ item.title }}</h3>
              <div class="comment-len">{{ item.comments_len }} 评论</div>
              <!-- 在a标签中通常不包裹a标签 使用其他标签做替换-->
              <router-link
                :to="{ name: 'user-space', query: { userId: item.userId } }"
                tag="span"
              >
                <!-- 在前端显示是span标签，超链接仍然生效 -->
                <!-- tag="span"可替换为tag="em " -->
                <!-- 跳转到个人主页 -->
                <div class="author">{{ item.name }}</div>
              </router-link>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MenuCard",
  props: {
    // 数据
    info: {
      // 规定数据类型是数组
      type: Array,
      // 引用数据类型，default是一个函数，返回值是数组
      default: () => [],
    },
    // width:{

    // }
  },
};
</script>

<style lang="stylus" scoped>
.menu-card {
  flex-wrap: wrap;

  .el-col-24 {
    width: 220px;
    margin: 20px 4px;
    /* el-col-24 本身有10px的内填充（行内样式）需要去掉 */
    padding: 0 !important;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    img {
      // 避免太高
      height: 262px;
      // 最小宽度，避免填充不完全
      min-width: 218px;
    }
  }

  .menu-card-detail {
    h3 {
      font-size: 18px;
      line-height: 1.5em;
    }

    /* 评论条数 */
    .comment-len {
      color: #888;
      font-size: 12px;
      line-height: 2em;
    }

    /* 作者 */
    .author {
      color: #ff4450;
      font-size: 12px;
      line-height: 2em; // 相对于本身标签文字大小
    }
  }
}
</style>